<template>
	<view class="content data-v-ef37df72">
		<view class="title_content data-v-ef37df72" @click="projectAction">
			<text class="title data-v-ef37df72" style="flex:1;margin-left:10rpx;">训练记录</text>
			<text class="arrow uni-icon data-v-ef37df72">全部训练▸</text>
		</view>
		<view class="scheme_item data-v-ef37df72">
			<view class="scheme_info data-v-ef37df72" v-for="(item,index) in schemeList" :key="index"
				@click="schemeItemAction(item)">
				<image class="scheme_img data-v-ef37df72"
					src="https://ehealth.ipd.hihonor.com/etmcstatic/iv_scheme_img1.png"></image>
				<view class="scheme_text_info data-v-ef37df72">
					<text class="scheme_text_title data-v-ef37df72">{{item.schemeName}}</text>
					<text class="scheme_text_time BebasNeueBold data-v-ef37df72"
						style="white-space:pre-wrap;font-size:28rpx;">{{item.schemeCount}}</text>
					<text class="scheme_text_time data-v-ef37df72"
						style="white-space:pre-wrap;">{{item.schemeTime}}</text>
				</view>
				<view class="data-v-ef37df72" :class="item.schemeState=='进行中' ?'status':'status2'">{{item.schemeState}}
				</view>
			</view>
		</view>
	</view>


</template>

<script>
	export default {
		data() {
			return {
				schemeList: [{
					schemeName: '2024科学减脂方案(1)',
					schemeCount: '3次/周',
					schemeTime: '2024-09-01 ~ 2025-12-01',
					schemeState: '进行中',
				}, {
					schemeName: '2024科学减脂方案(2)',
					schemeCount: '3次/周',
					schemeTime: '2024-09-01 ~ 2025-12-01',
					schemeState: '已结束',
				}]
			}
		},
		props: {
			schemeInfo: {
				type: Object,
				default: {}
			},
		},
		methods: {
			projectAction() {
				console.log('projectAction==>>')
				uni.navigateTo({
					url: '/pages/train/schemelist'
				})
			},
			schemeItemAction(item) {
				let pathUrl = '/pages/train/recorddetail'
				if (item.schemeState == '进行中') {
					pathUrl = '/pages/train/sportway'
				}
				uni.navigateTo({
					url: pathUrl
				})
			}
		},
	}
</script>

<style>
	.scheme_text_title.data-v-ef37df72,
	.title.data-v-ef37df72 {
		color: rgba(0, 0, 0, 0.871);
		font-size: 32rpx;
		font-weight: 700;
	}

	.scheme_text_title.data-v-ef37df72 {
		max-width: 380rpx;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.scheme_text_time.data-v-ef37df72 {
		color: rgba(0, 0, 0, 0.6);
		font-size: 24rpx;
		margin-top: 4rpx;
	}

	.line.data-v-ef37df72 {
		background-color: hsla(0, 0%, 93%, 0.933);
		height: 1px;
		margin-left: 36rpx;
		margin-right: 36rpx;
		width: auto;
	}

	.scheme_text_info.data-v-ef37df72 {
		display: flex;
		flex: 1;
		flex-direction: column;
		justify-content: center;
		margin-left: 24rpx;
	}

	.scheme_img.data-v-ef37df72 {
		color: #fff;
		height: 96rpx;
		width: 96rpx;
	}

	.scheme_info.data-v-ef37df72 {
		flex: 1;
		flex-direction: row;
		padding: 34rpx;
	}

	.scheme_img_background.data-v-ef37df72,
	.scheme_info.data-v-ef37df72 {
		align-items: center;
		display: flex;
	}

	.scheme_img_background.data-v-ef37df72 {
		background: #000;
		background-color: #ff8851;
		border-radius: 20rpx;
		height: 96rpx;
		justify-content: center;
		width: 96rpx;
	}

	.status.data-v-ef37df72 {
		background-color: rgba(255, 136, 81, 0.188);
		color: #ff7536;
	}

	.status.data-v-ef37df72,
	.status2.data-v-ef37df72 {
		align-items: center;
		border-radius: 26rpx;
		display: -webkit-inline-flex;
		display: inline-flex;
		font-size: 24rpx;
		height: 52rpx;
		justify-content: center;
		line-height: 1;
		width: 124rpx;
	}

	.status2.data-v-ef37df72 {
		background-color: rgba(168, 171, 187, 0.188);
		color: #7f8087;
	}

	.scheme_item.data-v-ef37df72 {
		background-color: #fff;
		border-bottom-left-radius: 32rpx;
		border-bottom-right-radius: 32rpx;
		display: flex;
		flex: 1;
		flex-direction: column;
		margin-left: 24rpx;
		margin-right: 24rpx;
	}

	.scheme_info.data-v-ef37df72:active {
		background-color: #eee;
	}

	.content.data-v-ef37df72 {
		color: #fff;
		display: flex;
		flex: 1;
		flex-direction: column;
		justify-content: center;
	}

	.title_content.data-v-ef37df72 {
		align-items: center;
		background-color: #fff;
		border-radius: 32rpx 32rpx 0 0;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		margin-left: 24rpx;
		margin-right: 24rpx;
		margin-top: 28rpx;
		padding: 24rpx;
	}

	.title_content.data-v-ef37df72:active {
		background-color: #eee;
	}

	.title_content.no-data.data-v-ef37df72 {
		border-radius: 32rpx;
	}

	.title_content.no-data.data-v-ef37df72:active {
		background-color: #eee;
	}

	.arrow.data-v-ef37df72 {
		color: rgba(0, 0, 0, 0.467);
		font-size: 28rpx;
	}
</style>